<div *ngIf="!!ovSettings" id="videoRoomNavBar" [class.boundsLight]="lightTheme">
  <app-dialog-choose-room
    *ngIf="showDialogChooseRoom"
    [userNickname]="user"
    [sessionName]="sessionName"
    [ovSettings]="ovSettings"
    (join)="toggleDialogChooseRoom($event)"
    (leaveSession)="exitSession()"
  ></app-dialog-choose-room>

  <div *ngIf="localUsers && localUsers[0]">
    <app-toolbar
      [lightTheme]="lightTheme"
      [newMessagesNum]="newMessages"
      [compact]="compact"
      [localUser]="localUsers[0]"
      [mySessionId]="mySessionId"
      [ovSettings]="ovSettings"
      (camButtonClicked)="toggleCam()"
      (micButtonClicked)="toggleMic()"
      (screenShareClicked)="screenShareAndChangeScreen()"
      (stopScreenSharingClicked)="stopScreenSharing()"
      (exitButtonClicked)="exitSession()"
      (chatButtonClicked)="toggleChat()"
    ></app-toolbar>

    <app-dialog-extension
      *ngIf="showDialogExtension"
      [nickname]="localUsers[0].getNickname()"
      (cancel)="toggleDialogExtension()"
    ></app-dialog-extension>
    <mat-sidenav-container class="sidenav-container" id="room-container" [class.boundsLight]="lightTheme" fullscreen>
      <mat-sidenav
        #sidenav
        mode="{{sidenavMode}}"
        position="end"
        class="sidenav-chat"
        [class.boundsLight]="lightTheme"
        fixedInViewport="true"
        fixedTopGap="40"
        fixedBottomGap="0"
        *ngIf="localUsers && (localUsers[0].getStreamManager() && (!this.ovSettings || (this.ovSettings && this.ovSettings.chat)))"
      >
        <chat-component
          #chatComponent
          [session]="this.session"
          [sessionScreen]="this.sessionScreen"
          [user]="this.localUsers[0]"
          [chatOpened]="chatOpened"
          [lightTheme]="lightTheme"
          [messageList]="messageList"
          (closeChat)="toggleChat()"
        ></chat-component>
      </mat-sidenav>

      <mat-sidenav-content class="sidenav-main">
        <div id="layout" class="bounds" [class.boundsLight]="lightTheme">
          <div
            class="OT_root OT_publisher custom-class"
            id="localUser"
            *ngFor="let localUser of localUsers"
            (dblclick)="enlargeElement($event)"
          >
            <stream-component
              *ngIf="localUser.getStreamManager()"
              #videoStream
              [user]="localUser"
              [localUser]="localUsers[0]"
              [lightTheme]="lightTheme"
              [newMessagesNum]="newMessages"
              [compact]="compact"
              [chatOpened]="chatOpened"
              [canEditNickname]="true"
              (nicknameClicked)="nicknameChanged($event)"
              (camButtonClicked)="toggleCam()"
              (micButtonClicked)="toggleMic()"
              (exitButtonClicked)="exitSession()"
              (chatButtonClicked)="toggleChat()"
              (screenShareClicked)="screenShareAndChangeScreen()"
              (stopScreenSharingClicked)="stopScreenSharing()"
            ></stream-component>
          </div>

          <div
            *ngFor="let user of this.remoteUsers"
            class="OT_root OT_publisher custom-class"
            id="remoteUsers"
            (dblclick)="enlargeElement($event)"
          >
            <stream-component
              #videoStream
              [user]="user"
              [localUser]="localUsers[0]"
              [lightTheme]="lightTheme"
              [newMessagesNum]="newMessages"
              [compact]="compact"
              [chatOpened]="chatOpened"
              [canEditNickname]="false"
              (camButtonClicked)="toggleCam()"
              (micButtonClicked)="toggleMic()"
              (exitButtonClicked)="exitSession()"
              (chatButtonClicked)="toggleChat()"
              (screenShareClicked)="screenShareAndChangeScreen()"
              (stopScreenSharingClicked)="stopScreenSharing()"
            ></stream-component>
          </div>
        </div>
      </mat-sidenav-content>
    </mat-sidenav-container>
  </div>
</div>
